<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/drilldown.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/no-data-to-display.js"></script>


<body class="white-bg">

<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="saleOrder-form">
                <div class="select-list">
                    <ul>
                        <li><a class="btn btn-info btn-rounded btn-sm"
                               onclick="getYearsTotal()"><i class="fa fa-search"></i>&nbsp;所有年份对比</a>

                        </li>
                        <li>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">年份</label>
                                <div class="col-sm-8">
                                    <input id="year" name="year" placeholder="输入四位数年份" class="form-control">
                                </div>
                            </div>
                            <!--<div class="form-group">-->
                            <!--<label class="col-sm-3 control-label">创建时间：</label>-->
                            <!--<div class="col-sm-8">-->
                            <!--<input id="Screatetime" name="ScreateTime" placeholder="输入开始时间"-->
                            <!--class="form-control" type="text">至<input id="Fcreatetime" name="FcreateTime"-->
                            <!--placeholder="输入结束时间" class="form-control" type="text">-->
                            <!--</div>-->
                            <!--</div>-->
                        </li>
                        <li><a class="btn btn-primary btn-rounded btn-sm"
                               onclick="getMonthData()"><i class="fa fa-search"></i>&nbsp;按年份搜索</a>
                            <a class="btn btn-success btn-rounded btn-sm"
                               onclick="getQuarterData()"><i class="fa fa-search"></i>&nbsp;按季度对比</a>
                            <a class="btn btn-danger btn-rounded btn-sm"
                               onclick="getSevenDaysData()"><i class="fa fa-search"></i>&nbsp;最近七天</a>
                            <a class="btn btn-warning btn-rounded btn-sm"
                               onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="col-sm-12 select-table table-striped">

            <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">

            </div>

        </div>
    </div>
</div>


<div th:include="include :: footer"></div>
<script th:inline="javascript">

    /* 分界线 */

    $('.form_datetime').datetimepicker({
        //language:  'fr',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1
    });
    $("#Screatetime").datetimepicker({//选择年月日
        format: 'yyyy-mm-dd',
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,//显示‘今日’按钮
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,  //Number, String. 默认值：0, 'hour'，日期时间选择器所能够提供的最精确的时间选择视图。

        clearBtn: false,//清除按钮

        forceParse: 0
    });
    $("#Fcreatetime").datetimepicker({//选择年月日
        format: 'yyyy-mm-dd',
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,//显示‘今日’按钮
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,  //Number, String. 默认值：0, 'hour'，日期时间选择器所能够提供的最精确的时间选择视图。

        clearBtn: false,//清除按钮

        forceParse: 0
    });
    var chart = null;
    $(function () {

        chart = Highcharts.chart('container', {

            title: {
                text: ''
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                type: 'category',
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: '销售额（元）'
                }
            },
            tooltip: {
                // head + 每个 point + footer 拼接成完整的 table
                headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                pointFormat: '<span style="color:{point.color}">{point.name}</span>:<b>{point.y:.2f}元</b> <br/>'
            },
            credits: {
                enabled: false
            },
            legend: {
                layout: 'vertical',
                align: 'bottom',
                verticalAlign: 'middle'
            },
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true,
                        format: '{point.y:.2f}元'
                    },
                    showInLegend: true
                }

            },
            series: [{


            }],
            lang: {
                noData: "此时间段无数据"

            },
            noData: {

            },

        });
    });
    //按年份对比
    getYearsTotal();

    function getYearsTotal() {
        $.getJSON('/order/compareTotalByYears', function (data) {
            var t = [];
            for (var i = 0; i < data.length; i++) {
                var v = {};
                v.y = data[i].total;
                v.name = data[i].year + "年";
                t.push(v)
            }
            chart.update({
                chart: {
                    inverted: false,
                    column: false,
                },
                title: {
                    text: '总销售额'
                },
                subtitle: {
                    text: "各年销售总额对比"
                },
                series: [{
                    type: "line",
                    name: "销售总额",
                    colorByPoint: true,
                    data: t,
                    showInLegend: true,
                }]
            });


        });

    }

    //某年下所有月份的销售额
    function getMonthData() {
        var pattern = /^(d{4})$/;
        var year = $("#year").val();
        if (year.match(/^([0-1]+[0-9]|2[0-3])([0-5][0-9])$/) && year != '') {
            $.getJSON('/order/sumTotalByMonth?year=' + year, function (data) {
                console.log(data);
                //如果没有数据
                if (data.length == 0) {

                    chart.update({
                        title: {
                            text: ""
                        },
                        subtitle: {
                            text: ""
                        },
                        series: {
                            data: data,

                        },
                        noData: {
                            style: {
                                fontWeight: 'bold',
                                fontSize: '15px',
                                color: '#303030'
                            }
                        },

                    });
                    return;
                }
                var t = [];
                var year = data[0].year;
                //将数据组装成[{,,,}]的形式才能被hcharts识别
                for (var i = 0; i < data.length; i++) {
                    var v = {};
                    v.y = data[i].total;
                    v.name = data[i].month + "月";
                    t.push(v)
                }

                chart.update({
                    chart: {
                        inverted: false,
                        column: false,
                    },
                    title: {
                        text: '总销售额'
                    },
                    subtitle: {
                        text: year + "年各月"
                    },
                    series: [{
                        type: "line",
                        name: "销售额",
                        colorByPoint: true,
                        data: t,
                        showInLegend: true,
                    }]
                });

            })
        } else {
            $.modal.alertWarning("年份为空或格式不正确，格式如下：20xx");

        }
    }

    //按季度对比
    function getQuarterData() {
        var year = $("#year").val();
        if (year.match(/^([0-1]+[0-9]|2[0-3])([0-5][0-9])$/) && year != '') {

            $.getJSON('/order/compareByQuarter?year=' + year, function (data) {
                //如果没有数据
                if (data.length == 0) {

                    chart.update({
                        title: {
                            text: ""
                        },
                        subtitle: {
                            text: ""
                        },
                        series: {
                            data: data,

                        },
                        noData: {
                            style: {
                                fontWeight: 'bold',
                                fontSize: '15px',
                                color: '#303030'
                            }
                        },

                    });
                    return;
                }
                var t = [];
                var year = data[0].year;
                //将数据组装成[{,,,}]的形式才能被hcharts识别
                for (var i = 0; i < data.length; i++) {
                    var v = {};
                    v.y = data[i].total;
                    v.name = "第" + data[i].quarter + "季度";
                    t.push(v)
                }

                chart.update({
                    chart: {
                        inverted: false,
                        column: false,
                    },
                    title: {
                        text: '季度销售额'
                    },
                    subtitle: {
                        text: year + "年各季度"
                    },
                    series: [{
                        type: "line",
                        name: "各季度销售额",
                        colorByPoint: true,
                        data: t,
                        showInLegend: true,
                    }]
                });


            });
        } else {
            $.modal.alertWarning("年份为空或格式不正确，格式如下：20xx");
        }

    }

    //最近七天
    function getSevenDaysData() {
        $.getJSON('/order/inSevenDays', function (data) {
            //如果没有数据
            if (data.length == 0) {

                chart.update({
                    title: {
                        text: ""
                    },
                    subtitle: {
                        text: ""
                    },
                    series: {
                        data: data,

                    },
                    noData: {
                        style: {
                            fontWeight: 'bold',
                            fontSize: '15px',
                            color: '#303030'
                        }
                    },

                });
                return;
            }
            var t = [];
            var myDate = new Date();
            var today = myDate.getFullYear()+'-'+ myDate.getMonth()+'-'+myDate.getDate();

            for (var i = 0; i < data.length; i++) {
                var v = {};
                v.y = data[i].total;
                v.name = data[i].days;

                if (i == data.length - 1) {
                    var d = new Date(data[i].days.replace(/-/g,"/"));
                    var todaysDate = new Date();
                    console.log(d);
                    if(d.setHours(0,0,0,0) == todaysDate.setHours(0,0,0,0)){
                        v.name="今日";
                    }
                }

                t.push(v)
            }

            chart.update({
                chart: {
                    inverted: false,
                    column: true,
                    line: false
                },
                title: {
                    text: '销售额统计'
                },
                subtitle: {
                    text: '最近七天'
                },
                series: [{
                    type: "column",
                    name: "近七天销售额",
                    colorByPoint: true,
                    data: t,
                    showInLegend: true,
                }]
            });


        });

    }


</script>
</body>
</html>